<template>
    <div id="app">
        <van-nav-bar
            v-show="isshowTitle"
            :title="pageTitle"
            :left-arrow="isshow"
            @click-left="onClickLeft"
        />
        <van-tabbar
            v-show="isTabBar"
            v-model="active"
            active-color="skyblue"
            inactive-color="#000"
        >
            <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
            <van-tabbar-item icon="cart-o" to="/shop" badge="2"
                >购物车</van-tabbar-item
            >
            <van-tabbar-item icon="records" to="/orderlist"
                >订单列表</van-tabbar-item
            >
            <van-tabbar-item icon="user-o" to="/login"
                >个人中心</van-tabbar-item
            >
            <van-tabbar-item icon="ellipsis" to="/more">更多</van-tabbar-item>
        </van-tabbar>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0,
            pageTitle: "标题",
            isshow: true,
            isshowTitle: true,
            isTabBar: true,
            isOnline:navigator.online,

        };
    },
    watch: {
        $route: {
            handler: function (route) {
                if (route.meta) {
                    let { pageTitle, mainPage, isshowTitle } = route.meta;
                    this.pageTitle = pageTitle;
                    this.isshow = mainPage ? true : false;
                    this.isTabBar = mainPage ? false : true;
                    this.isshowTitle = mainPage ? true : false;
                }
            },
            immediate: true, //立即执行调用
        },
        // 监听是否有网络
        isOnline(){
            this.isOnline === false && this.$toast.fail('网络异常，请检查您的网络')
            this.isOnline === true && this.$toast.success('网络正常连接，祝您生活愉快')
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        updataNetworkStatu(e){
        //    console.log(e.type);
        this.isOnline = e.type ==='online' ? true: false;
        }
    },
    mounted() {
        window.addEventListener("online",this.updataNetworkStatu);
        window.addEventListener("offline",this.updataNetworkStatu);
    },
};
</script>

<style lang="scss">
@import "@/assets/scss/common.scss";
@import "./assets/scss/var.scss";

html{
    scroll-behavior: smooth;
}
*{
    box-sizing: border-box;
}
#app {
    /*适配和居中*/
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto 150px;

    .van-tabbar {
        min-width: 320px;
        max-width: 750px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
